<template>
  <div>
    <!-- 上传说明 -->
    <!-- 必填
    action 指定上传地址,现在给个 #
    :file-list 指定管理图片的数组
     -->

    <!-- 样式相关
    list-type 控制上传样式
    -->

    <!-- 判断
    fileLis 的长度大于零,我们才添加 disabled 这个类名
    -->

    <!-- 触发事件
    onPreview 点击触发的事件,可以接收一个 file 参数,这个参数里面就有我们的 url 地址
     -->

    <!-- 钩子
         on-remove 删除钩子
        on-change 改变的钩子(已经添加, 但是还没上传成功)
        :before-upload 上传前的钩子
        :http-request  覆盖默认的上传行为，可以自定义上传的实现
      -->
    <el-upload
      action="#"
      :class="{disabled:fileList.length>0}"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="onPreview"
      :on-remove="onRemove"
      :on-change="onChange"
      :before-upload="beforeUpload"
      :http-request="upload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <!-- 进度条 -->
    <el-progress
      v-if="isShowPer"
      :percentage="percentage"
      style="width:149px"
      :show-text="false"
    />

    <!-- 弹窗 -->
    <el-dialog title="预览" :visible="isShowPreview" @close="isShowPreview = false">
      <el-row type="flex" justify="center">
        <img :src="previewImg" alt="" width="100%">
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
// 利用 id + key 创建一个实例
const cos = new COS({
  SecretId: 'AKIDZy7zbx2qOgiVjlY5MOAgwxjFVWIo56sO',
  SecretKey: 'IK7evwkIbeRzIL8gz2pNgjW4NRFn7BzY'
})

export default {
  data() {
    return {
      fileList: [],
      isShowPreview: false,
      previewImg: '',
      percentage: 0, // 控制进度条
      isShowPer: false
    }
  },
  methods: {
    onPreview(file) {
      console.log(file)
      //   弹窗出来
      this.isShowPreview = true
      this.previewImg = file.url
    },
    onRemove(file, fileList) {
      console.log(fileList)
      this.fileList = fileList
    },
    onChange(file, fileList) {
      console.log(fileList)
      this.fileList = fileList
    },
    // 上传前
    beforeUpload(file) {
      console.log('上传前')
      console.log(file)
      //   大小校验
      const maxSize = 2 * 1024 * 1024
      if (file.size > maxSize) {
        this.$message.warning('图片不能超过2M')
        return false
      }
      // 类型校验
      //   定义一个数组,保存能支持的格式
      const aowedType = ['image/jpeg', 'image/png']
      //   判断,找不到我们定义数组里面的格式的话.那就提示用户,和结束函数
      if (aowedType.indexOf(file.type) === -1) {
        this.$message.success('只支持 jpeg 和 png 格式')
        return false
      }
    },
    // 正在上传
    upload(params) {
      console.log('正在上传')
      console.log(params)
      //   正在上传的时候让他显示出来
      this.isShowPer = true
      cos.putObject({
        Bucket: 'yangzhen-1308177695', // 存储桶
        Region: 'ap-nanjing', // 地域
        // 把时间搓设置为36进制,这样每次上传的就不一样了   toString(36)设置进制的
        Key: Date.now().toString(36) + params.file.name, // 文件名
        Body: params.file, // 要上传的文件对象
        StorageClass: 'STANDARD', // 上传的模式类型 直接默认 标准模式即可
        // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
        // 进度发生变化的回调
        // 可以接收一个参数,参数里面有一个 percent,他接收控制进度条的,拿到他最后 * 100
        onProgress: (progressDate) => {
          console.log('进度', JSON.stringify(progressDate))
          this.percentage = progressDate.percent * 100
        }
      }, (err, data) => {
        // 上传完毕回调函数
        console.log(err || data)
        if (!err) {
          // 上传完毕,通知element ui
          this.fileList[0].status = 'success'
          this.fileList[0].url = `http://${data.Location}`
        } else {
          console.dir(err)
          this.$message.error(err.message)
        }
        setTimeout(() => {
          // 上传完成隐藏进度条
          this.isShowPer = false
        }, 1000)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// /deep/ .el-upload--picture-card {
.disabled {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>
